<template>
  <div class="app-container">
    <!-- 搜索区 -->
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true"   >
      <el-form-item label="车牌" prop="carNo">
        <el-input v-model="queryParam.carNo" placeholder="请输入车牌号" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="所属门店" prop="deptId">
        <el-select v-model="queryParam.deptId" placeholder="所属门店" clearable>
          <el-option
            v-for="item in storeList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="车主姓名" prop="customerName">
        <el-input v-model="queryParam.customerName" placeholder="请输入车主姓名" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="queryParam.contactPhone" placeholder="请输入联系电话" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>


      <company ref="companyRef"  @callback="chooseCompany"></company>


      <el-form-item label="新能源" prop="newEnergyVehicles">
        <el-select v-model="queryParam.newEnergyVehicles" placeholder="新能源" clearable>
          <el-option
            v-for="dict in dict.type.new_energy_vehicles"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="时间类型" prop="searchDateType">
        <el-select @change="dataTypeChange" v-model="queryParam.searchDateType" placeholder="时间类型" clearable style="width: 140px;">
          <el-option
            v-for="dict in dict.type.car_search_date"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

        <el-date-picker
          v-if="queryParam.searchDateType"
          v-model="createTimeValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd"
          end-placeholder="结束日期">
        </el-date-picker>

      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="el-icon-search" size="mini" @click="handleRest">重置</el-button>
      </el-form-item>
    </el-form>

    <!--功能区-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          v-hasPermi='["info:car:add"]'
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          v-hasPermi='["info:car:edit"]'
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate()"
        >修改</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          v-hasPermi='["info:car:edit"]'
          icon="el-icon-edit"
          size="mini"
          @click="handleCache()"
        >同步所有数据到索引库</el-button>
      </el-col>
    </el-row>


    <el-table :data="tableData.rows" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="scope">

          <el-descriptions class="margin-top" title="详情" :column="3"   border>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                车型
              </template>
              {{scope.row.modelName}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                下次保养里程
              </template>
              {{scope.row.nextMileage}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                年检时间
              </template>
              {{scope.row.inspectionDate}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                发动机编号
              </template>
              {{scope.row.engineNo}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                到店里程数
              </template>
              {{scope.row.arrivalMileage}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                保险到期时间
              </template>
              {{scope.row.insuranceDate}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                保险公司
              </template>
              {{scope.row.insuranceCompany}}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                备注
              </template>
              {{scope.row.remark}}
            </el-descriptions-item>
          </el-descriptions>

          <!-- 其它属性 -->
          <el-descriptions v-if="scope.row.attributesList" class="margin-top" title="车辆属性" :column="3" size="medium" border>

            <el-descriptions-item v-for="(item,key) in scope.row.attributesList" v-bind:key="key">
              <template slot="label">
                <i class="el-icon-user"></i>
                {{ item.key }}
              </template>
              {{item.value}}
            </el-descriptions-item>

          </el-descriptions>

          <!-- 车辆照片 -->
          <div class="margin-top el-descriptions" v-if="scope.row.carInfoPhotoList">
            <div class="el-descriptions__header">
              <div class="el-descriptions__title">车辆照片</div>
              <div class="el-descriptions__extra"></div>
            </div>

            <div class="el-descriptions__body  carPhoto">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(item, index) in scope.row.carInfoPhotoList" :key="item.id" >
                  <el-card class="cardcss" :body-style="{ padding: '0px' }">
                    <img :src="item.picture" class="image">
                    <!-- <div style="padding: 14px;">
                       <div class="bottom clearfix">
                       </div>
                     </div> -->
                  </el-card>
                </el-col>
              </el-row>

            </div>
          </div>



        </template>
      </el-table-column>

      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="deptName" label="所属门店" />
      <el-table-column prop="cusCateName" label="客户类型" />
      <el-table-column prop="componeyName" label="所属公司" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column prop="carNo" label="车牌号" />
      <el-table-column prop="customerName" label="车主名称"  />
      <el-table-column prop="contactName" label="联系人"  />
      <el-table-column prop="contactPhone" label="手机号"  />
      <el-table-column prop="newEnergyVehiclesName" label="新能源"  />
      <el-table-column   label="提示">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.inspectionDay" class="item" effect="dark" :content="'年检时间到期还有'+scope.row.inspectionDay+'天'" placement="right">
            <el-button type="primary"  size="mini" round>年检</el-button>
          </el-tooltip>

          <el-tooltip v-if="scope.row.insuranceDay" class="item" effect="dark" :content="'保险时间到期还有'+scope.row.insuranceDay+'天'" placement="right">
            <el-button type="danger"  size="mini" round>保险</el-button>
          </el-tooltip>


        </template>
      </el-table-column>





      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-hasPermi='["info:car:edit"]' icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
                   :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange" />



  </div>
</template>

<script>
import PageMixin from '@/mixins/PageMixin.js'
import {dataApi,loadAllDataToEs } from '@/api/info/carinfo.js'
import {allStore} from '@/api/system/dept.js'
// 引用自定义组件
import company from '@/components/Compnay/index.vue'
import { Loading } from 'element-ui'
let  importLoadingInstance;

export default {
  mixins: [PageMixin],
  // 查询通用字典中的键
  dicts: ['compony_status','new_energy_vehicles','car_search_date'],
  components: {
    company
  },
  data() {

    return {
      // 查询函数
      fetchDataApi: dataApi,
      primaryKey: 'id',
      //头像放到表单哪个字段里面
      uploadField: undefined,
      //所有门店
      storeList:[],
    }
  },
  methods: {
    // 重置表单
    initFormValue(){
      this.form= {
        status: '1'
      }
    },
    handleExcel(){
      // this.download('/api/employee/download',this.queryParam,'employee_data.xlsx')
    },
    // 查询所有门店
    fetchAllStore(){
      allStore().then(resp => {
        this.storeList = resp.data
      })
    },
    chooseCompany(row){
      this.queryParam.componeyId= row.id
    },
    //查询日期类型发生变化
    dataTypeChange(val){
      if(!val){
        this.createTimeValue=[]
      }
    },
    // 重置查询条件
    handleRest(){
      this.$refs['queryForm'].resetFields()
      this.queryParam.page=1
      //调用组件内部的方法
      this.$refs['companyRef'].clearForm()
      this.queryParam.componeyId=undefined
    },
    mapSplit(map){
      //{ "车系": "福特 福特F-150 2019款 3.5T 猛禽性能劲化版" }

      const result={
        key:'',
        value:''
      }
      console.log(map)
      for(let  key in map){
        console.log(key)
        console.log(map[key])
        result.key=key
        result.value= map[key]
      }
      return result
    },
    //新增开新的页面
    handleAdd(){
      this.$router.push("/info/carinfo/edit");
    },
    //修改开新的页面
    handleUpdate(row){
      if(row){
        this.$router.push("/info/carinfo/edit?id="+row.id);
      }else{
        this.$router.push("/info/carinfo/edit?id="+this.ids[0]);
      }
    },
    //同步数据到ES
    handleCache(){
      this.$confirm('确定要同步数据吗，此项操作一定要小心使用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        importLoadingInstance = Loading.service({ text: "正在同步数据要耐心等待!请不要做任何操作!", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })

        loadAllDataToEs().then(resp=> {
          importLoadingInstance.close()
          this.$message('数据同步成功');
        }).cache(e=> {
          importLoadingInstance.close()
          this.$message.error('数据同步失败');
        })

      }).catch(() => {

      });

    }

  },
  created(){
    this.initFormValue()
    this.fetchAllStore()
  }

}
</script>

<!-- 全局样式，覆盖element-->
<style>
.carPhoto .cardcss .el-card__body{
  margin: 0 auto;
  text-align: center;
}
.el-descriptions__title{
  padding-left: 20px;
  padding-top: 10px;
}
</style>

<!-- 局部样式-->
<style scoped="scoped">
.carPhoto .time {
  font-size: 13px;
  color: #999;
}

.carPhoto .bottom {
  margin-top: 13px;
  line-height: 12px;
}

.carPhoto  .button {
  padding: 0;
  float: right;
}

.carPhoto  .image {
  max-width: 90%;
}

.carPhoto .clearfix:before,
.carPhoto  .clearfix:after {
  display: table;
  content: "";
}

.carPhoto  .clearfix:after {
  clear: both
}



</style>
